import { RectRight } from "@nutui/icons-react-taro";
import { Col, Image, Row } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import React from "react";
import { INews } from "../../types";
import "./index.scss";

export interface PanelProps {
  data: INews;
  /**
   * 缩略图高度
   */
  coverImageHeight?: number;
  /**
   * 缩略图宽度
   */
  coverImageWidth?: number;
  onClick?: (item: INews) => void;
}

export const Panel = ({
  data,
  coverImageHeight = 60,
  coverImageWidth = 60,
  onClick,
}: PanelProps) => {
  return (
    <>
      <View className="item" onClick={() => onClick?.(data)}>
        <Row gutter={8}>
          <Col span={5}>
            <Image
              height={coverImageHeight}
              width={coverImageWidth}
              radius={5}
              mode="scaleToFill"
              src={data.pic}
            />
          </Col>
          <Col span={17}>
            <View className="item-title">{data.title}</View>
            <View className="item-description">{data.description}</View>
          </Col>
          <Col span={2}>
            <RectRight color="#c1c1c1" size={14} />
          </Col>
        </Row>
      </View>
    </>
  );
};
